<template>
  <div class="login">
    <div class="pannel">
      <div class="title">系统登录</div>
      <el-form :model="formData" :rules="rules" ref="form">
        <el-form-item prop="account">
          <el-input
            class="mt20"
            type="text"
            placeholder="请输入手机号"
            prefix-icon="iconfont icon-user"
            v-model="formData.account"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :type="status ? 'password' : 'text'"
            class="mt20"
            placeholder="请输入密码"
            v-model="formData.password"
          >
            <i slot="prefix" class="iconfont icon-password"></i>
            <i
              slot="suffix"
              @click="status = !status"
              class="iconfont"
              :class="status ? 'icon-close' : 'icon-open'"
            ></i>
          </el-input>
        </el-form-item>
        <el-button type="primary" class="btn mt20" @click="loginBtn()">
          登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login} from '@/views/utils/users';
export default {
  data() {
    let checkAccount = (rule, value, callback) => {
      //非空验证
      if (!value) {
        return callback(new Error("请输入账号"));
      }
      //正则验证
      // let reg = /^1[3-9][0-9]{9}$/;
      // if (!reg.test(value)) {
      //   return callback(new Error("手机号格式不对"));
      // }
      return callback();
    };

    return {
      formData: {
        account: "",
        password: "",
      },
      status: true,
      rules: {
        account: [{ validator: checkAccount, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    loginBtn() {
      this.$refs.form.validate(  async (status) => {
        if (status) {
          let res = await login(this.formData);
          console.log(res);
        }
      });
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #2d3a4b;
}
.pannel {
  width: 400px;
  height: 300px;
}
.title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.btn {
  width: 100%;
}
/deep/.el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  color: #fff;
}
/deep/.el-input__prefix i {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/.el-input__suffix i {
  height: 40px !important;
  line-height: 40px !important;
}
</style>